<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .content {
        width: 800px;
        margin: 0 auto;
      }
      /* 设置返回顶部背景图 */
      .go-top {
        /* 固定定位始终在可视区固定位置 */
        position: fixed;
        right: 30px;
        bottom: 10px;
        /* display: block; */
        /* 隐藏图片 */
        display: none;
        width: 99px;
        height: 175px;
        background: url(./images/huojian1.jpg) no-repeat;
      }
    </style>
  </head>
  <body>
    <!-- 占位图 -->
    <div style="height: 1200px"></div>
    <div class="content">
      <img src="./images/0.jpg" alt="image" />
      <img src="./images/1.jpg" alt="image" />
      <img src="./images/2.jpg" alt="image" />
      <img src="./images/3.jpg" alt="image" />
      <img src="./images/4.jpg" alt="image" />
      <img src="./images/5.jpg" alt="image" />
      <img src="./images/6.jpg" alt="image" />
      <img src="./images/6.jpg" alt="image" />
      <img src="./images/6.jpg" alt="image" />
    </div>

    <!-- 回到顶部 -->
    <a class="go-top" href="javascript:void(0)"></a>
    <!-- href="javascript:void(0)" 阻止a标签默认行为 -->
  </body>
  <script>
    // 获取”回到顶部“DOM
    var goTop = document.getElementsByClassName("go-top")[0];

    //获取可视区的高度
    var clientHeight = document.documentElement.clientHeight;
    // 或 var clientHeight1 = window.innerHeight;

    // 窗口滚动事件
    window.onscroll = function () {
      // 获取滚动条的位置
      var scrollTop =
        document.documentElement.scrollTop;
      // console.log(scrollTop);
      if (scrollTop >= clientHeight) {
        goTop.style.display = "block";
        //当滚动条距离大于屏幕高度，显示火箭1图片
      } else {
        goTop.style.display = "none";
        goTop.style.background = "url(./images/huojian1.jpg) no-repeat";
        //当火箭2返回时，滚动条距离小于屏幕高度时不显示火箭图片，并将火箭2该为火箭1图片，便于下次使用
      }

      // 将定时器赋初值为null便于垃圾回收
      var timer = null;
      goTop.onclick = function () {
        // setInterval()设置一个定时器用来实现页面动态滚动，每隔0.05s执行一次指定函数
        timer = setInterval(function () {
          // 单击向上滚动时”回到顶部“切换第二张图片
          goTop.style.background = "url(./images/huojian2.jpg) no-repeat";
          // 每次向上移动后重新获取滚动条距离顶部的位置
          var scrollTop =
            document.documentElement.scrollTop;
          //设置速度  实现动态向上滚动
          var speed = Math.floor(-scrollTop / 100);
          // 每隔1ms 高度减去一个值 直到减完为止  (设置窗口距离顶端的距离)
          document.documentElement.scrollTop =
            scrollTop + speed;
          // 当距离顶部距离为0时移除定时器，避免一直执行
          if (scrollTop == 0) {
            clearInterval(timer);
          }
        }, 1);
      };
    };
  </script>
</html>

